<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css" />
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>订购单管理</li>
    <li>修改</li>
  </ul>
</div>
<div class="formbody">
  <form th:action="@{/order/updateOrder}" method="post" id="orderFrom">
      <div class="formtitle"><span>订购单信息</span></div>
      <ul class="forminfo">
          <li>
              <label>订单编号</label>
              <input name="orderid" type="text" th:value="${order.orderid}" readonly="readonly" class="roinput" />
              <i>自动生成不能编辑</i>
          </li>
          <li>
              <label>客户姓名</label>
              <input type="hidden" name="customid" id="customid" th:value="${order.customid}" >
              <input name="customname" type="text" th:value="${order.custom.customname}"  readonly="readonly" class="dfinput" />
              <i>不能编辑</i>
          </li>
          <li>
              <label>订购时间</label>
              <input name="ordertimeStr" id="ordertimeStr" type="text" th:value="${#dates.format(order.ordertime,'yyyy-MM-dd HH:mm:ss')}" readonly="readonly" class="roinput" />
              <i>不能编辑</i>
          </li>
          <li>
              <label>创建人</label>
              <input type="hidden" name="operatorid" th:value="${order.operatorUser.uid}"/>
              <input  type="text" th:value="${order.operatorUser.uname}" readonly="readonly" class="roinput" />
              <i>不能编辑</i>
          </li>
          <li>
              <label>审核状态</label>
              <input type="text" name="status" th:value="${order.status}" readonly="readonly" class="roinput" />
              <input name="" type="hidden" value="1" />
              <i>不能编辑</i>
          </li>
          <li>
              <label>总金额</label>
              <input name="ordermoney" id="ordermoney" type="text" th:value="${order.ordermoney}" readonly="readonly" class="roinput" />
              <i>自动运算，不能编辑</i>
          </li>
          <li>
              <input type="button" value="新增" class="smallbtn" onclick="addOrderdetails()" />
              &nbsp;&nbsp;&nbsp;&nbsp;
              <input type="button" value="删除" class="smallbtn"  onclick="deleteOrderdetails()" />
              &nbsp;&nbsp;&nbsp;&nbsp;
              <input type="submit" value="保存" class="smallbtn"  />
              &nbsp;&nbsp;&nbsp;&nbsp;
              <input type="button" value="返回" class="smallbtn" onclick="window.history.go(-1);"/>
          </li>
      </ul>
      <table class="tablelist">
          <thead>
              <tr>
                  <th></th>
                  <th>序号</th>
                  <th>品牌</th>
                  <th>类型</th>
                  <th>型号</th>
                  <th>数量</th>
                  <th>单位</th>
                  <th>单价</th>
                  <th>金额</th>
              </tr>
          </thead>
          <tbody id="OrderdetailsList">
              <tr th:each="orderdetails:${order.orderdetailsList}">
                  <td><input type="checkbox" name="OrderdetailsCheck" style="width: 20px"/></td>
                  <td class="bianhao" th:text="${orderdetailsStat.count}"></td>
                  <td>
                      <input type="hidden" class="detailsId" name="detailsId" th:value="${orderdetails.detailsId}" >
                      <select name="brandId" class="brandId">
                          <option value="">请选择</option>
                          <option th:each="brand:${brandList}" th:text="${brand.brandName}" th:value="${brand.brandId}" th:selected="${orderdetails.cProduct.cType.cBrand.brandId == brand.brandId}"></option>
                      </select>
                  </td>
                  <td>
                      <select name="typeId" class="typeId" >
                          <option value="">请选择</option>
                          <option selected th:value="${orderdetails.cProduct.cType.typeId}">[[${orderdetails.cProduct.cType.typeName}]]</option>
                      </select>
                  </td>
                  <td>
                      <select name="productId" class="productId" >
                          <option value="" >请选择</option>
                          <option selected th:value="${orderdetails.productId}">[[${orderdetails.cProduct.productModel}]]</option>
                      </select>
                  </td>
                  <td><input name="purchaseNum" class="purchaseNum"  type="text" th:value="${orderdetails.purchaseNum}" /></td>
                  <td>台</td>
                  <td><input name="proprice" class="proprice" type="text" th:value="${orderdetails.proprice}" /></td>
                  <td><input name="prototal" class="prototal" type="text" th:value="${orderdetails.prototal}" /></td>
              </tr>
          </tbody>
      </table>
  </form>
</div>
<script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');


    function addOrderdetails (){
        $('#OrderdetailsList tr').last().clone(true).appendTo("tbody");
        $('#OrderdetailsList tr').last().find(".bianhao").html($('#OrderdetailsList tr').length);
        var options = " <option value=''>请选择</option>"
        $('#OrderdetailsList tr').last().children("td:eq(2)").find('.detailsId').val("");

        $('#OrderdetailsList tr').last().children("td:eq(2)").find('.brandId').children("option:eq(0)").attr("selected",true);

        $('#OrderdetailsList tr').last().children("td:eq(3)").find('.typeId').html("");
        $('#OrderdetailsList tr').last().children("td:eq(3)").find('.typeId').html(options);

        $('#OrderdetailsList tr').last().children("td:eq(4)").find('.productId').html("");
        $('#OrderdetailsList tr').last().children("td:eq(4)").find('.productId').html(options);

        $('#OrderdetailsList tr').last().children("td:eq(5)").find('.purchaseNum').val("");
        $('#OrderdetailsList tr').last().children("td:eq(7)").find('.proprice').val("");
        $('#OrderdetailsList tr').last().children("td:eq(8)").find('.prototal').val("");

    }
    //清除数据
    function removeValue(ele){
        $(ele).nextAll().each(function (){
            var options = " <option value=''>请选择</option>"
            $(this).find('.typeId').html("");
            $(this).find('.typeId').html(options);

            $(this).find('.productId').html("");
            $(this).find('.productId').html(options);

            $(this).find('.purchaseNum').val("");
            $(this).find('.proprice').val("");
            $(this).find('.prototal').val("");

            var ordermoney = 0;
            $(".prototal").each(function () {
                var money = $(this).val();
                if (money != null && money != "" && money != 0) {
                    ordermoney = Number(ordermoney) + Number(money);
                }
            })
            $("#ordermoney").val(ordermoney);
        })
    }
    function deleteOrderdetails() {
        $("[name='OrderdetailsCheck']:checked").each(function (){
            $(this).parent().parent().remove()
        });
        var ordermoney = 0;
        $(".prototal").each(function () {
            var money = $(this).val();
            if (money != null && money != "" && money != 0) {
                ordermoney = Number(ordermoney) + Number(money);
            }
        })
        $("#ordermoney").val(ordermoney);
    }


    $("#OrderdetailsList").children("tr").each(function () {
        /*为了显示商品的类型*/
        $(this).children("td:eq(2)").change(function () {

            //清空后面的数据
            removeValue($(this));

            var brandId = $(this).find(".brandId").val();
            var tempThis = $(this);
            if (brandId != null && brandId != "") {
                $.ajax({
                    url: "/order/queryCTypeListByAjax",
                    data: {"brandId": brandId},
                    dataType: "JSON",
                    success: function (data) {
                        /*清空类型数据*/
                        tempThis.next().find(".typeId").html("");
                        var options = "<option value=''>请选择</option>";
                        var arr = null;
                        if (typeof data == 'string')
                            arr = JSON.parse(data);
                        else
                            arr = data;
                        for (let i in arr) {
                            options += "<option value='"
                                + arr[i].typeId
                                + "'>"
                                + arr[i].typeName
                                + "</option>";
                        }
                        console.log(options);
                        tempThis.next().find(".typeId").html(options);
                    },
                    error: function () {
                        alert(222);
                    }
                });
            } else {
                /*清空类型数据*/
                tempThis.next().find(".typeId").html("");
                var options = "<option value=''>请选择</option>";
                tempThis.next().find(".typeId").html(options);
            }
        });
        /*为了显示对应的商品型号*/
        $(this).children("td:eq(3)").change(function () {
            //清空后面的数据
            removeValue($(this));

            var typeId = $(this).find(".typeId").val();
            var tempThis = $(this);
            if (typeId != null && typeId != "") {
                $.ajax({
                    url: "/order/queryProductListByAjax",
                    data: {"typeId": typeId},
                    dataType: "JSON",
                    success: function (data) {
                        /*清空商品型号数据*/
                        tempThis.next().find(".productId").html("");
                        var options = "<option value=''>请选择</option>";
                        var arr = null;
                        if (typeof data == 'string')
                            arr = JSON.parse(data);
                        else
                            arr = data;

                        for (let i in arr) {
                            options += "<option value='"
                                + arr[i].productId
                                + "'>"
                                + arr[i].productModel
                                + "</option>";
                        }
                        console.log(options);
                        tempThis.next().find(".productId").html(options);
                    },
                    error: function () {
                        alert(222);
                    }
                });
            } else {
                /*清空商品型号数据*/
                tempThis.next().find(".productId").html("");
                var options = "<option value=''>请选择</option>";
                tempThis.next().find(".productId").html(options);
            }
        });
        /*为了显示商品对应的单价*/
        $(this).children("td:eq(4)").change(function () {

            //清空后面的数据
            removeValue($(this));

            var productId = $(this).find(".productId").val();
            var tempThis = $(this);
            if (productId != null && productId != "") {
                $.ajax({
                    url: "/order/queryProductPriceByAjax",
                    data: {"productId": productId},
                    dataType: "text",
                    success: function (data) {
                        /*清空商品单价数据*/
                        tempThis.next().next().next().find(".proprice").val(data);
                    },
                    error: function () {
                        alert(222);
                    }
                });
            } else {
                /*清空商品单价数据*/
                tempThis.next().next().next().find(".proprice").val("");
            }
        });
        /*输入数量，对金额进行赋值*/
        $(this).children("td:eq(5)").find(".purchaseNum").keyup(function () {
            var purchaseNum = $(this).val();
            var price = $(this).parent().next().next().find(".proprice").val();
            var prototal = 0;
            if (purchaseNum != null && purchaseNum != "") {
                if (price != null && price != "") {
                    prototal = price * purchaseNum;
                }
            }
            $(this).parent().next().next().next().find(".prototal").val(prototal);

            var ordermoney = 0;
            $(".prototal").each(function () {
                var money = $(this).val();
                if (money != null && money != "" && money != 0) {
                    ordermoney = Number(ordermoney) + Number(money);
                }
            })
            $("#ordermoney").val(ordermoney);

        });
    })
</script>
</body>
</html>
